<template>
  <div class="page-scan-mana">
    <el-form :inline="true" :model="dataQueryForm" ref="dataQueryForm">
      <div class="pc-page-header">
        <el-form-item prop="id">
          <el-input v-model="dataQueryForm.storageNo" clearable class="pc-input3-col5" placeholder="输入主体代码"></el-input>
        </el-form-item>
        <el-form-item prop="id">
          <el-input v-model="dataQueryForm.storageName" clearable class="pc-input3-col5" placeholder="输入主体名称"></el-input>
        </el-form-item>
        <el-form-item  prop="id">
          <el-select v-model="dataQueryForm.status" clearable placeholder="选择状态" class="pc-input3-col5" >
            <el-option v-for="item in statusOption" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="id">
          <el-input v-model="dataQueryForm.city" clearable class="pc-input3-col5" placeholder="输入仓储地"></el-input>
        </el-form-item>
        <el-form-item  prop="id">
          <el-select v-model="dataQueryForm.techType" clearable placeholder="选择类别" class="pc-input3-col5" >
            <el-option v-for="item in techTypeOption" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item  prop="id">
          <el-select v-model="dataQueryForm.migGrade" clearable placeholder="选择MIG评级" class="pc-input3-col5" >
            <el-option v-for="item in migGradeOption" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="">
          <el-button type="primary" @click="queryDataFn">搜索</el-button>
          <el-button type="primary" @click="refresh('dataQueryForm')">刷新</el-button>
          <el-button type="primary" @click="viewAddStorageFn(storageInfoEmpty, '新建主体', '创建主体', 1)">新建主体</el-button>
        </el-form-item>
      </div>
    </el-form>

    <!--列表数据-->
    <egrid border class="page-list"
           :data="tableData"
           :columns="columns"
           :columns-schema="columnsSchema"
           :columns-props="columnsProps">
    </egrid>

    <!--分页组件-->
    <div class="pc-pagination-panel">
      <pc-pagination ref="pcPagination" :url="pageUrl.queryDataList" :queryData="dataQueryForm"
                     @on-query="queryCallBackFn">
      </pc-pagination>
    </div>

    <!--主体详情页面-->
    <pc-dialog :is-show="isShowDetailDialog" title='主体详情' @on-close="isShowDetailDialog = false">
      <div>
        <detail :storageInfo="storageInfo">
        </detail>
      </div>
    </pc-dialog>

    <!--新建主体页面-->
    <pc-dialog :is-show="isShowAddStorageDialog" :title='dialogTitle' @on-close="isShowAddStorageDialog = false">
      <div>
        <add-storage :storageInfo="storageInfo" :btnTitle="btnTitle" @sure="afterAddStorage()">
        </add-storage>
      </div>
    </pc-dialog>

    <!--编辑主体页面-->
    <pc-dialog :is-show="isShowEditStorageDialog" :title='dialogTitle' @on-close="isShowEditStorageDialog = false">
      <div>
        <edit-storage :storageInfo="storageInfo" @sure="afterEditStorage()">
        </edit-storage>
      </div>
    </pc-dialog>

    <!--编辑等级页面-->
    <pc-dialog-center :is-show="isShowEditGradeDialog" title='评级' @on-close="isShowEditGradeDialog = false" width="320" height="260">
      <div>
        <edit-grade :storageInfo="storageInfo" @sure="afterEditGrade()">
        </edit-grade>
      </div>
    </pc-dialog-center>

  </div>
</template>

<script type="text/ecmascript-6">
  import PcPagination from 'components/form/pagination';
  import PcButton from 'components/form/button';
  import PcDialog from 'components/dialog';
  import PcDialogCenter from 'components/dialog/center.vue';
  import EgridCellView from 'components/wms/comm/EgridCellView.vue';
  import {enums} from '../../../../utils/settings';
  import Detail from './detail.vue';
  import AddStorage from './addStorage.vue';
  import EditStorage from './editStorage.vue';
  import EditGrade from './editGrade.vue';
  let that;

  // 主体代码链接详情
  var storageNoLink = {
    template: ` <el-button class="base-storage-no" @click="viewdetail(row)" type="text" size="small">{{this.row.storageNo}}</el-button>`,
    props: ['row'],
    methods: {
      viewdetail(val) {
        this.$emit('view-detail', val);
      }
    }
  };

  // 操作按钮
  var Btn = {
    template: `<div style="display:flex; width: 100%;flex-wrap: wrap">
        <el-button v-if="showComplementBtn" type="info"    plain @click="gotoComplement(row)">补充资料</el-button>
        <el-button v-if="showEditInfoBtn"   type="primary" plain @click="gotoEditStorage(row)">编辑</el-button>
        <el-button v-if="showEditGradeBtn"  type="primary" plain @click="gotoEditGrade(row)">评级</el-button>
      </div>`,
    props: ['row'],
    computed: {
      // 是否显示补充资料按钮
      showComplementBtn() {
        return this.row.status === enums.SK_BASE_STATUS.NEED_COMPLEMENT;
      },
      // 是否显示编辑按钮
      showEditInfoBtn() {
        return this.row.status === enums.SK_BASE_STATUS.COMPLEMENTED;
      },
      // 是否显示评级按钮
      showEditGradeBtn() {
        return this.row.status === enums.SK_BASE_STATUS.COMPLEMENTED;
      }
    },
    methods: {
      // 跳转补充资料
      gotoComplement (val) {
        this.$emit('add-storage', val);
      },
      // 跳转编辑主体
      gotoEditStorage (val) {
        this.$emit('edit-storage', val);
      },
      // 跳转编辑评级
      gotoEditGrade (val) {
        this.$emit('edit-grade', val);
      }
    }
  };

  export default {
    data() {
      return {
        storageInfo: null,
        storageInfoEmpty: {
          id: '',
          storageNo: '',
          province: '',
          city: ''
        },
        editType: '',
        dialogTitle: '',
        btnTitle: '',
        isShowDetailDialog: false,
        isShowAddStorageDialog: false,
        isShowEditStorageDialog: false,
        isShowEditGradeDialog: false,
        dataQueryForm: {
          storageNo: null,
          storageName: null,
          status: null,
          city: null,
          techType: null,
          migGrade: null
        },
        tableData: [],
        columns: [
          {
            label: '主体代码',
            // prop: 'storageNo'
            component: storageNoLink,
            listeners: {
              'view-detail' (val) {
                that.viewDetailFn(val);
              }
            }
          },
          {
            label: '主体名称',
            prop: 'storageName'
          },
          {
            label: '状态',
            prop: 'statusDisplay'
          },
          {
            label: '仓储地',
            prop: 'city'
          },
          {
            label: '技术手段',
            prop: 'techTypeDisplay'
          },
          {
            label: '冷库规模(吨)',
            prop: 'totalVolume'
          },
          {
            label: '履约率',
            prop: 'performRateDisplay'
          },
          {
            label: '历史交易量(吨)',
            prop: 'totalTradeVolume'
          },
          {
            label: '交易次数',
            prop: 'totalTradeTime'
          },
          {
            label: '违规次数',
            prop: 'totalViolateTime'
          },
          {
            label: 'MIG评级',
            prop: 'migGrade'
          },
          {
            label: '操作',
            minWidth: 160,
            fixed: 'right',
            component: Btn, // 'el-button'
            listeners: {
              'add-storage' (data, title) {
                that.viewAddStorageFn(data, '补充资料', '补充完成', enums.SK_BASE_EDIT_TYPE.COMPLEMENT);
              },
              'edit-storage' (data) {
                that.viewEditStorageFn(data);
              },
              'edit-grade' (data) {
                that.viewEditGradeFn(data);
              }
            },
            propsHandler: function ({ row, col, column }) {
              return {row, col, column};
            }
          }
        ],
        columnsSchema: {
          '主体代码': {minWidth: 110},
          '主体名称': {minWidth: 240},
          '状态': {minWidth: 100},
          '仓储地': {minWidth: 120},
          '技术手段': {minWidth: 80},
          '冷库规模(吨)': {minWidth: 110},
          '履约率': {minWidth: 70},
          '历史交易量(吨)': {minWidth: 130},
          '交易次数': {minWidth: 90},
          '违规次数': {minWidth: 90},
          'MIG评级': {minWidth: 90}
        },
        selecetedRows: [],
        // columnsProps 用于定义所有 columns 公共的属性，
        // 这里属性可以参考这里： http://element.eleme.io/#/zh-CN/component/table#table-column-attributes
        columnsProps: {
          height: 40,
          minWidth: 140,
          showOverflowTooltip: true,
          component: EgridCellView
        },
        statusOption: [
          {
            value: 1,
            label: '待补充资料'
          }, {
            value: 2,
            label: '已补充资料'
          }
        ],
        techTypeOption: [
          {
            value: 1,
            label: '人工单据'
          }, {
            value: 2,
            label: '电子单据'
          }
        ],
        migGradeOption: [
          {
            value: 'AAA',
            label: 'AAA'
          }, {
            value: 'AA',
            label: 'AA'
          }, {
            value: 'A',
            label: 'A'
          }, {
            value: 'BBB',
            label: 'BBB'
          }, {
            value: 'BB',
            label: 'BB'
          }, {
            value: 'B',
            label: 'B'
          }, {
            value: 'C',
            label: 'C'
          }
        ],
        // columnsHandler 可用于在现有的 columns 进行操作，对 columns 进行增删改，这里新增了操作列
        pageUrl: {
          queryDataList: '/malisk/server/base/queryStorageList'
        }
      };
    },
    components: {
      PcPagination, PcButton, PcDialog, Detail, AddStorage, EditStorage, PcDialogCenter, EditGrade
    },
    created() {
      that = this;
    },

    methods: {
      // 表头样式
      getHeaderStyle({row, column, rowIndex, columnIndex}) {
        if (rowIndex === 0) {
          return 'background: #f5f5f5; height: 50px';
        } else {
          return '';
        }
      },
      getRowClass({row, column, rowIndex, columnIndex}) {
        if (rowIndex === 0) {
          return 'background:rgb(245, 245, 245);';
        } else {
          return '';
        }
      },
      viewDetailFn (scopeRow) {
        this.storageInfo = scopeRow;
        this.isShowDetailDialog = true;
      },
      viewAddStorageFn (scopeRow, dialogTitle, btnTitle, editType) {
        this.storageInfo = scopeRow;
        this.dialogTitle = dialogTitle;
        this.btnTitle = btnTitle;
        this.editType = editType;
        this.isShowAddStorageDialog = true;
      },
      viewEditStorageFn (scopeRow) {
        this.storageInfo = scopeRow;
        this.dialogTitle = '编辑主体';
        this.editType = enums.SK_BASE_EDIT_TYPE.EDIT_INFO;
        this.isShowEditStorageDialog = true;
      },
      viewEditGradeFn (scopeRow) {
        this.storageInfo = scopeRow;
        this.dialogTitle = '评级';
        this.isShowEditGradeDialog = true;
      },
      openMessage() {
        this.$notify.info({
          title: '自定义位置',
          message: '右下角弹出的消息',
          position: 'bottom-right'
        });
      },
      afterAddStorage() {
        this.isShowAddStorageDialog = false;
        if (this.editType === enums.SK_BASE_EDIT_TYPE.ADD) {
          this.$refs.pcPagination.queryListWithPageFn(true);
        } else {
          this.$refs.pcPagination.queryListWithPageFn(false);
        }
      },
      afterEditStorage() {
        this.isShowEditStorageDialog = false;
        this.$refs.pcPagination.queryListWithPageFn(false);
      },
      afterEditGrade() {
        this.isShowEditGradeDialog = false;
        this.$refs.pcPagination.queryListWithPageFn(false);
      },
      queryCallBackFn(res) {
        this.tableData = res.result.list;
      },
      queryDataFn() {
        this.$refs.pcPagination.queryListWithPageFn(true);
      },
      refresh(formName) {
        this.$refs[formName].resetFields();
        this.dataQueryForm.storageNo = null;
        this.dataQueryForm.storageName = null;
        this.dataQueryForm.status = null;
        this.dataQueryForm.city = null;
        this.dataQueryForm.techType = null;
        this.dataQueryForm.migGrade = null;
        this.queryDataFn();
      }
    }
  };
</script>
<style>
  .base-storage-no {
    padding: 5px 0px !important;
  }
</style>
